<template>
    <div style="display: flex;background-color:rgb(221.7, 222.6, 224.4);width:100%;height:650px ">
        <el-form ref="dataFormRef" :model="dataForm" label-width="100px" style="margin-top: 25px;width: 800px"
            :rules="rules">
            <el-form-item label="订单id">
                <el-input v-model="dataForm.orderId" disabled />
            </el-form-item>
            <el-form-item label="订单编号">
                <el-input v-model="dataForm.orderNumber" disabled />
            </el-form-item>
            <el-form-item label="路线id" prop="routeId">
                <el-input-number v-model="dataForm.routeId" placeholder="请输入订单id" />
            </el-form-item>
            <el-form-item label="乘客电话" prop="passengerPhoneNumber">
                <el-input v-model="dataForm.passengerPhoneNumber" placeholder="请输入乘客电话" />
            </el-form-item>
            <el-form-item label="座位类型">
                <el-select v-model="dataForm.seatType" placeholder="请选择座位类型">
                    <el-option v-for="item in seatTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="座位行号" prop="seatRowNo">
                <el-input-number v-model="dataForm.seatRowNo" placeholder="请输入座位行号" />
            </el-form-item>
            <el-form-item label="座位列号" prop="seatColNo">
                <el-input-number v-model="dataForm.seatColNo" placeholder="请输入座位列号" />
            </el-form-item>
            <el-form-item label="支付用户电话" prop="paidUserPhoneNumber">
                <el-input v-model="dataForm.paidUserPhoneNumber" placeholder="请输入支付用户电话" />
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input-number v-model="dataForm.price" placeholder="请输入价格" />
            </el-form-item>
            <el-form-item label="订单时间">
                <el-input v-model="dataForm.orderTime" disabled />
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="dataForm.status" placeholder="请选择订单状态">
                    <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="margin-top: 30px;">
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="router.push({ name: 'order' })">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const dataFormRef = ref(null);
// 表单
const dataForm = reactive({
    orderId: null,
    orderNumber: null,
    routeId: null,
    passengerPhoneNumber: null,
    seatType: null,
    seatRowNo: null,
    seatColNo: null,
    paidUserPhoneNumber: null,
    price: null,
    orderTime: null,
    status: null
});
// 座位类型
const seatTypeOptions = ref([
    {
        label: '商务座',
        value: 0
    },
    {
        label: '普通座',
        value: 1
    }
])
// 订单状态
const orderStatusOptions = ref([
    {
        label: '未支付',
        value: 0
    },
    {
        label: '已支付',
        value: 1
    },
    {
        label: '已取消',
        value: 2
    }
])
// 表单提交校验
const rules ={
        routeId:[{required: true, message: '路线id必填', trigger: 'blur'}],
        passengerPhoneNumber: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        seatRowNo: [
            { required: true, message: '请输入座位行号', trigger: 'blur' }
        ],
        seatColNo: [
            { required: true, message: '请输入座位列号', trigger: 'blur' }
        ],
        paidUserPhoneNumber:[
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        price: [
            { required: true, message: '请输入价格', trigger: 'blur' },
        ],
    }  
/**
 * 表单提交
 */
const onSubmit = () => {
    // 校验
    dataFormRef.value.validate((valid) => {
        if (!valid) {
            proxy.Message.error("请检查输入信息是否正确");
        } else {
            proxy.Confirm({
                message: '确定提交？',
                okfun: async () => {
                    let params = {};
                    Object.assign(params, dataForm);
                    let result = await proxy.Request.request({
                        url: proxy.Api.updateOrder,
                        params: params
                    });
                    if (!result) {
                        return;
                    }
                    proxy.Message.success("提交成功");
                    router.push({ name: 'order' });
                }
            })
        }
    })
}
onMounted(() => {
        const row = route.query.row ? JSON.parse(route.query.row) : null;
        if (row) {
            dataForm.orderId = row.orderId;
            dataForm.orderNumber = row.orderNumber;
            dataForm.routeId = row.routeId;
            dataForm.passengerPhoneNumber = row.passengerPhoneNumber;
            dataForm.seatType = row.seatType;
            dataForm.seatRowNo = row.seatRowNo;
            dataForm.seatColNo = row.seatColNo;
            dataForm.paidUserPhoneNumber = row.paidUserPhoneNumber;
            dataForm.price = row.price;
            dataForm.orderTime = row.orderTime;
            dataForm.status = row.status;
        }
    })
</script>

<style scoped>
.el-form {
    .el-form-item {
        width: 400px;
    }
}
</style>